<template>
  <div class="home">
    <div class="left">
      <div>
        <p>经度：{{ Lnglat.lng }}</p>
        <p>纬度：{{ Lnglat.lat }}</p>
      </div>
      <div>
        <p>{{ address }}</p>
      </div>
      <div>
        <p>实时天气</p>
        <p>城市:{{ weatherInfo.city }}</p>
        <p>天气:{{ weatherInfo.weather }}</p>
        <p>温度:{{ weatherInfo.temperature }}</p>
      </div>
    </div>
    <div class="container" id="container"></div>
    <div class="right"></div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, computed, ref, reactive, onUnmounted } from 'vue'
import AMapLoader from '@amap/amap-jsapi-loader';
let map = null

const Lnglat = ref({
  lat: '',
  lng: ''
})
const address = ref('')
const weatherInfo=ref('')
onMounted(() => {
  window._AMapSecurityConfig = {
    securityJsCode: "80ee37e81f618acf3d79df02e0362d1a",
  };
  AMapLoader.load({
    key: "98408742f8915dbace8c296c0ab57d2f", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ["AMap.Scale", "AMap.Geocoder", 'AMap.ToolBar', 'AMap.Weather'], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
  }).then((AMap) => {
    window._AMap = AMap
    // 展示地图
    map = new AMap.Map("container", {
      pitch: 50, //地图俯仰角度，有效范围 0 度- 83 度
      viewMode: '2D', //地图模式
      rotateEnable: true, //是否开启地图旋转交互 鼠标右键 + 鼠标画圈移动 或 键盘Ctrl + 鼠标左键画圈移动
      pitchEnable: true, //是否开启地图倾斜交互 鼠标右键 + 鼠标上下移动或键盘Ctrl + 鼠标左键上下移动
      zoom: 10, //初始化地图层级
      rotation: 0, //初始地图顺时针旋转的角度
      zooms: [2, 20], //地图显示的缩放级别范围
      center: [116.333926, 39.997245] //初始地图中心经纬度
    });
    //工具条
    let toolBar = new AMap.ToolBar({
      visible: true,
      position: {
        top: '110px',
        right: '40px'
      }
    });
    map.addControl(toolBar);
    map.on("click", function (ev) {
      //触发事件的对象
      var target = ev.target;
      //触发事件的地理坐标，AMap.LngLat 类型
      var lnglat = ev.lnglat;
      //触发事件的像素坐标，AMap.Pixel 类型
      var pixel = ev.pixel;
      //触发事件类型
      var type = ev.type;
      Lnglat.value.lat = lnglat.lat
      Lnglat.value.lng = lnglat.lng
      let lnglats = [lnglat.lng, lnglat.lat]
      getAddressFn([lnglats])

    });
  })
    .catch((e) => {
      console.log(e);
    });
  console.log(map)

});
//逆地理编码langlats[[]]
const getAddressFn = (lnglats) => {
  let geocoder = new _AMap.Geocoder({})
  geocoder.getAddress(lnglats, function (status, result) {
    if (status === "complete" && result.info === "OK") {
      console.log(result.regeocodes[0])
      address.value = result.regeocodes[0].formattedAddress
      getWeather(result.regeocodes[0].addressComponent.adcode)
    }
  });
}
// 天气查询 1.注册插件
const getWeather = (adcode) => {
  //创建天气查询实例
  var weather = new AMap.Weather();
  //执行实时天气信息查询
  weather.getLive(adcode, function (err, data) {
    console.log(err, data);
    if (!err) {
      weatherInfo.value=data
    }
  });
}
onUnmounted(() => {
  map?.destroy();
});
</script>
<style scoped lang="scss">
.home {
  width: 100%;
  height: 100%;
  display: flex;

  .left {
    width: 200px;
    height: 100%;
  }

  .container {
    width: calc(100% - 400px);
    height: 100%;
  }

  .right {
    width: 200px;
    height: 100%;
  }
}
</style>
